<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="./js/jquery.js"></script>
		<style>
			div {
				margin: 600px auto;
				width: 50%;
				height: 400px;
				background-color: cyan;
			}

			nav {
				display: none;
				position: fixed;
				right: 20px;
				bottom: 100px;
				width: 40px;
				height: 40px;
				background-color: darkblue;
				line-height: 20px;
				text-align: center;
				color: #ccc;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div></div>

		<nav>返回顶部</nav>
		<script>
			//
			$(document).scroll(function() {
				console.log($(this).scrollTop());
				if ($(this).scrollTop() >= $("div").offset().top) {
					$("nav").fadeIn();
				} else {
					$("nav").fadeOut();
				}

			})
			$("nav").on("click", function() {
				$("html").animate({
					scrollTop: 0
				});
			})
		</script>
	</body>

</html>
